<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-aside :class="isCollapse ? 'suoxiao' : 'zhankai'">
          <asidemenu :userData="userData" :isCollapse="isCollapse" />
        </el-aside>
        <el-container>
          <el-header style="padding-right: 80px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="display: flex; ">
                <div @click.stop="isCollapse = !isCollapse" style="line-height: 65px; width: 20px;margin-right: 30px;">
                  <img src="../../public/icon/收起.svg" alt="" style="width: 20px; height: 20px;">
                </div>
                <div>
                  <el-breadcrumb separator="/" style="line-height: 60px;">
                    <el-breadcrumb-item :to="{ path: item.path }"
                      v-for="item in route.path == '/index' ? flag : route.matched" :key="item.path">{{
                        item.meta.title }}</el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
              </div>
              <div style="display: flex;align-items: center;">
                <el-dropdown trigger="click">
                  <div style="position: relative;">
                    <svg t="1715761498844" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="3546" width="26" height="26">
                      <path
                        d="M834.32522 700.591182l-71.42716-86.055732v-126.735803c0-163.93933-98.652557-233.786243-202.497355-247.150617v-15.44127a48.400705 48.400705 0 1 0-96.84656 0v15.44127c-103.844797 13.409524-202.497354 83.211287-202.497355 247.105467v126.780953L189.62963 700.591182a22.484656 22.484656 0 0 0 17.382716 36.932628h609.975308a22.484656 22.484656 0 0 0 17.337566-36.932628z m-579.273368-8.217284l45.91746-55.308642a22.755556 22.755556 0 0 0 5.19224-14.447972v-134.862787c0-184.617989 137.029982-204.529101 195.860317-204.5291 4.018342 0 6.998236 0.0903 11.152029 0.180599 1.760847-0.0903 4.695591-0.1806 8.713933-0.180599 58.875485 0 195.815168 19.911111 195.815167 204.57425v134.817637c0 5.28254 1.851146 10.38448 5.19224 14.447972l45.96261 55.308642H255.051852zM512 847.238095a69.079365 69.079365 0 0 0 69.034215-69.034215H442.965785a69.079365 69.079365 0 0 0 69.034215 69.034215z"
                        fill="#231815" p-id="3547"></path>
                    </svg>
                    <div class="el-dropdown-link" v-show="unread.length != 0">
                      {{ unread.length }}
                    </div>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu style="padding:15px;">
                      <div style="display: flex;width: 100%;border-bottom: 2px solid #ccc;width: 500px;">
                        <div :class="active == 0 ? 'active' : ''" @click="active = 0" style="margin-right: 25px;">未读{{
                          unread.length }}条
                        </div>
                        <div :class="active == 1 ? 'active' : ''" @click="active = 1">已读{{ read.length }}条</div>
                      </div>
                      <div v-show="active == 0" style="height: 500px;overflow-y: auto;">
                        <div v-show="unread.length == 0"
                          style="padding: 20px;text-align: center;height: 500px;overflow-y: auto;">
                          暂无未读消息
                        </div>
                        <div class="boxs" v-show="unread.length != 0" v-for="item in unread">
                          <div style="display: flex;justify-content: space-between;line-height: 24px;">
                            <div style="display: flex">
                              <el-tag type="success">{{ item.type == 1 ? '通知' : item.type == 2 ? '提示' : item.type == 3
                                ?
                                '重要' : '紧急'
                                }}</el-tag>
                              <div style="margin-left: 10px;">
                                {{ item.content }}
                              </div>
                            </div>
                            <div @click="delmessage(item.id)">
                              ×
                            </div>
                          </div>
                          <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                            <div @click="readMessage(item.id)">已读</div>
                            <div>
                              <div>
                                发送人：{{ item.sendUser.username }}
                              </div>
                              <div>
                                {{ item.create_time }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-show="active == 1">
                        <div v-show="read.length == 0" style="padding: 20px;text-align: center">
                          暂无已读消息
                        </div>
                        <div v-show="read.length != 0" v-for="item in read"
                          style="box-shadow: 0px 0px 10px 0px gainsboro;margin-top: 25px;padding: 15px">
                          <div style="display: flex;justify-content: space-between;line-height: 24px;">
                            <div style="display: flex">
                              <el-tag type="success">{{ item.type == 1 ? '通知' : item.type == 2 ? '提示' : item.type == 3
                                ?
                                '重要' : '紧急'
                                }}</el-tag>
                              <div style="margin-left: 10px;">
                                {{ item.content }}
                              </div>
                            </div>
                            <div @click="delmessage(item.id)">
                              ×
                            </div>
                          </div>
                          <div style="display: flex;justify-content: right">
                            <div>
                              <div>
                                发送人：{{ item.sendUser.username }}
                              </div>
                              <div>
                                {{ item.create_time }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <div style="width: 30px;height: 30px;border-radius: 50%;overflow: hidden;margin-left: 15px">
                  <img :src="userData.staffPhoto" alt="" style="width: 30px;">
                </div>
                <el-dropdown trigger="click">
                  <div style="margin-left: 15px">{{ userData.username }}</div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="gobacklogin">登出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

              </div>
            </div>
          </el-header>
          <el-main style="padding: 15px;height: calc(100vh - 65px); overflow-y: auto">
            <div>
              <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in" appear>
                  <component :is="Component" />
                </transition>
              </router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue';
import asidemenu from '@/components/asidemenu.vue';
import { useRouter, useRoute } from 'vue-router'
import { getUserInfo, getNotice, readNotice, deleteNotice } from '@/api/home'
import { ElMessage } from 'element-plus'
import { useStore } from '@/stores/counter'
const store = useStore()
const router = useRouter()
const route = useRoute()
let active = ref(0)
const isCollapse = ref(false)
let userData: any = ref({})
let unread: any = ref([])
let read: any = ref([])
getUserInfo().then(res => {
  userData.value = res.data.data
  store.$state.userData = res.data.data
})
// setInterval(() => {
//   messagerender()
// }, 3000)
const messagerender = () => {
  getNotice().then(res => {
    unread.value = res.data.data.unread
    read.value = res.data.data.read
  }).catch(err => {
    // console.log(err);
    router.push('/login')
    localStorage.removeItem('token')
    ElMessage({
      message: '登陆过期，请重新登陆',
      type: 'error'
    })
  })
}
messagerender()
let flag: any = ref(true)
watchEffect(() => {
  if (route.path == '/index') {
    flag.value = route.matched.filter(item => item.path == '/index')
  }
})
// 更新某个消息的状态为已读
const readMessage = (id: any) => {
  readNotice(id).then(res => {
    messagerender()
  })
}
//删除消息
const delmessage = (id: any) => {
  deleteNotice(id).then(res => {
    ElMessage({
      message: res.data.message,
      type: 'success',
    })
    messagerender()
  })
}
//用户登出
const gobacklogin = () => {
  localStorage.removeItem('token')
  router.push('/login')
  ElMessage({
    message: '退出登陆成功',
    type: 'success'
  })
}
</script>

<style>
@import '../assets/home.css'
</style>